<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
/*
function fn(){
  return 123
}
console.log(fn())//123
*/
//js执行代码顺序
//同步>异步
/*
function fn(){
  setTimeout(() => {
    return 123
  }, 0)
  // return undefined
}
console.log(fn())
*/
// 异步函数
// 用途:用来接受异步的执行结果
// 特征:以参数的形式传一个函数到另外一个函数里面执行,并接受结果
/*
function fn(callback){
  setTimeout(() => {
    // return 123
    callback(123)
  }, 0)
  // return undefined
}
// fn(function(result){
//   console.log(result)
// })
fn(result=>{
  console.log(result)
})
*/
//回调地狱
//存在多层嵌套
/*
fn(data1=>{
  console.log(data1)
  fn(data2=>{
    console.log(data2)
    fn(data3=>{
      console.log(data3)
    })
  })
})
*/
//回顾promise语法
/*
let p = new Promise((resolve,reject)=>{
  setTimeout(() => {
    // resolve(123)
    reject({status:500,message:'报错'})
  }, 0)
})
p.then((data)=>{
  console.log(data)
}).catch((error)=>{
  console.log(error)
})
*/
//封装promise
function axios(){
  return new Promise((resolve,reject)=>{
    setTimeout(() => {
      resolve(123)
      // reject({status:500,message:'报错'})
    }, 0)
  })
}
/*
axios({url:'/url1'}).then((data)=>{
  console.log(data)
  axios({url:'/url2'}).then((data)=>{
    console.log(data)
    axios({url:'/url3'}).then((data)=>{
      console.log(data)
    })
  })
})
*/
// 用链式调用解决回调地狱
// $('#box').text('1123').css({fontSize: '12px'})
/*
axios({url:'/url1'}).then((data1)=>{
  console.log(data1)
  return axios({url:'/url2'})
}).then((data2)=>{
  return axios({url:'/url3'})
}).then((data3)=>{
  console.log(data3)
})
*/
// 用async和await简化代码,简化promise接收
async function fn(){
  let data1 = await axios({url:'/url1'})
  console.log(data1)
  let data2 = await axios({url:'/url2'})
  console.log(data2)
  let data3 = await axios({url:'/url3'})
  console.log(data3)
}
fn()
</script>
</html>
